<!doctype html>
<style>
span { 
  width: 50px; height: 50px; margin: 5px; 
  display: inline-block; background-color: red;
}

/* A semicolon at the top level of a @media block should not cause the
   whole @media block to be invalidated; in particular, valid rules
   either before or after it should not be discarded.  (But a rule
   immediately after the semicolon is consumed by error recovery.)  */
@media screen {
  #a { background-color: green }
  ;
}
@media screen {
  #b { background-color: green } 
  ;
  #b { background-color: yellow }
  #c { background-color: green }
}

/* A stray close curly brace in the middle of a selector should not
   be treated as a resynchronization point, however.  */
#d { background-color: green }
badselector( } #d { background-color:red } ) {}
#e { background-color:green }

</style>
<span id="a"></span>
<span id="b"></span>
<span id="c"></span>
<span id="d"></span>
<span id="e"></span>
